<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
export default {
    data() {
        const gridOptions = {
            border: true,
            showOverflow: true,
            keepSource: true,
            mouseConfig: {
                selected: true
            },
            editConfig: {
                trigger: 'dblclick',
                mode: 'cell',
                showStatus: true
            },
            columns: [
                { type: 'seq', width: 70 },
                { field: 'name', title: 'Name', editRender: { name: 'input' } },
                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
                { field: 'age', title: 'Age', editRender: { name: 'input' } },
                { field: 'role', title: 'Role', sortable: true, editRender: { name: 'input' } },
                { field: 'address', title: 'Address', sortable: true, editRender: { name: 'input' } }
            ],
            data: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
            ],
            menuConfig: {
                body: {
                    options: [
                        [
                            { code: 'CLEAR_CELL', name: '清除值' },
                            { code: 'REVERT_CELL', name: '还原值' }
                        ],
                        [
                            {
                                name: '插入单行数据',
                                children: [
                                    { code: 'INSERT_AT_ROW', name: '插入单行' },
                                    { code: 'INSERT_NEXT_AT_ROW', name: '插入单行 next' },
                                    { code: 'INSERT_AT_EDIT_ROW', name: '插入单行并编辑' },
                                    { code: 'INSERT_NEXT_AT_EDIT_ROW', name: '插入单行 next 并编辑' }
                                ]
                            },
                            {
                                name: '插入多行数据',
                                children: [
                                    { code: 'BATCH_INSERT_AT_ROW', name: '插入多行' },
                                    { code: 'BATCH_INSERT_NEXT_AT_ROW', name: '插入多行 next' },
                                    { code: 'BATCH_INSERT_AT_EDIT_ROW', name: '插入多行并编辑' },
                                    { code: 'BATCH_INSERT_NEXT_AT_EDIT_ROW', name: '插入多行 next 并编辑 ' }
                                ]
                            }
                        ],
                        [
                            {
                                name: '删除数据',
                                children: [
                                    { code: 'DELETE_ROW', name: '删除行' },
                                ]
                            }
                        ],
                    ]
                },
            }
        };
        return {
            gridOptions
        };
    }
};
</script>
